<template>
  <div class="Badge">
    <p class="BadgeNum" v-show="num && num !== 0 && !isDot" :style="badgeStyle">
      {{ value }}
    </p>
    <p class="dot" v-show="isDot" :style="badgeStyle"></p>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    num: {
      type: [Number, String],
      default: 0,
    },
    max: {
      type: Number,
      default: 99,
    },
    bgColor: {
      type: String,
      default: "red",
    },
    size: {
      type: String,
      default: "mini",
    },
    color: {
      type: String,
      default: "#fff",
    },
    isDot: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    value() {
      if (typeof this.num === "number") {
        return this.num < this.max ? this.num : `${this.max}+`;
      } else if (typeof this.num === "string") {
        return this.num;
      }
    },
    badgeStyle() {
      let background = this.bgColor;

      const fontSize =
        this.size === "mini"
          ? "12px"
          : this.size === "big"
          ? "16px"
          : this.size === "nomal"
          ? "14px"
          : "14px";
      // 假设background和color是共同属性
      const commonStyle = {
        background,
        color: this.color,
      };

      if (!this.isDot) {
        return {
          ...commonStyle,
          fontSize,
        };
      } else {
        return commonStyle;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.Badge {
  position: relative;
  .BadgeNum {
    position: absolute;
    top: -10px;
    right: 5px;
    min-height: 20px;
    min-width: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
  }

  .dot {
    position: absolute;
    top: -10px;
    right: 5px;
    min-height: 10px;
    min-width: 10px;
    border-radius: 50%;
  }
}
</style>
